<template>
<div class="quarter-pick-box">
  <div class="val-box">{{showVal}}</div>
  <el-date-picker
    popper-class="quarter-pick"
    v-model="value"
    type="month"
    :picker-options="pickerOptions"
    value-format="yyyy-MM"
    placeholder="选择日期">
  </el-date-picker>
</div>
</template>

<script>

export default {
  props: {
    defaultVal: String
  },
  data () {
    return {
      pickerOptions: {
        disabledDate: time => {
          let s = time.getTime();
          let month = this.Moment(s).format('M');
          return Number(month) > 4;
        }
      },
      value: '',
      showVal: ''
    }
  },
  mounted () {
    if (this.defaultVal) {
      this.value = this.defaultVal;
    }
  },
  watch: {
    value (val) {
      this.$emit('change', val)
      if (!val) {
        this.showVal = '';
        this
        return;
      }
      let y = this.Moment(val).format('YYYY');
      let m = this.Moment(val).format('M');
      let obj = {
        '1': '一季度',
        '2': '二季度',
        '3': '三季度',
        '4': '四季度'
      }
      this.showVal = `${y} ${obj[m]}`;
    }
  }
}
</script>
